<template>
  <div
    class="messageEnter"
    :style="{
      height: mesHeight,
    }"
  >
  <div v-infinite-scroll="getList" class="scrollBox"  v-if="$store.state.mobile.userAgent==='mobile'">
      <div
        v-for="(item, index) in mesList"
        :key="index"
        @click="turnMessage(item)"
      >
        <van-swipe-cell
          :before-close="beforeClose"
          @click="getCurid(item.userAnnouncementId)"
          :stop-propagation="true"
        >
          <div class="mesBoxInfo">
            <span :class="['typeicon',`typecolor${item.type}`]">{{mesTypeArr.length?mesTypeArr.find(arrinfo=>Number(arrinfo.value)===item.type).label:''}}</span>
            <img :src="imgMes" alt="" class="mesboxleft" />
            <div class="mesboxright">
              <div
                class="leftinfoMesCss"
                :style="{
                  fontSize: $attrs.fontSize,
                  color: $attrs.backColor,
                  fontWeight: $attrs.bold ? 'bold' : 'normal',
                  fontStyle: $attrs.italic ? 'italic' : 'normal',
                  textDecoration: $attrs.underline ? 'underline' : 'none',
                  textAlign: $attrs.textAlign,
                  lineHeight: $attrs.lineHeight,
                  width:item.type==2?'80%':'86%'
                }"
              >
                {{ item.title }}
              </div>
              <div
                class="leftinfoMesCss"
                :style="{
                  fontSize: $attrs.fontSize2,
                  color: $attrs.backColor2,
                  fontWeight: $attrs.bold2 ? 'bold' : 'normal',
                  fontStyle: $attrs.italic2 ? 'italic' : 'normal',
                  textDecoration: $attrs.underline2 ? 'underline' : 'none',
                  textAlign: $attrs.textAlign2,
                  lineHeight: $attrs.lineHeight2,
                }"
              >{{item.contentDisplay}}</div>
            </div>
          </div>
          <template #right>
            <van-button
              square
              text="删除"
              type="danger"
              @click="delForm()"
              class="delete-button"
            />
          </template>
        </van-swipe-cell>
      </div>
    </div>
    <div class="scrollBox" v-else>
      <div
        v-for="(item, index) in mesList"
        :key="index"
        @click="turnMessage(item)"
      >
        <van-swipe-cell
          :before-close="beforeClose"
          @click="getCurid(item.userAnnouncementId)"
          :stop-propagation="true"
        >
          <div class="mesBoxInfo">
            <span :class="['typeicon',`typecolor${item.type}`]">{{mesTypeArr.length?mesTypeArr.find(arrinfo=>Number(arrinfo.value)===item.type).label:''}}</span>
            <img :src="imgMes" alt="" class="mesboxleft" />
            <div class="mesboxright">
              <div
                class="leftinfoMesCss"
                :style="{
                  fontSize: $attrs.fontSize,
                  color: $attrs.backColor,
                  fontWeight: $attrs.bold ? 'bold' : 'normal',
                  fontStyle: $attrs.italic ? 'italic' : 'normal',
                  textDecoration: $attrs.underline ? 'underline' : 'none',
                  textAlign: $attrs.textAlign,
                  lineHeight: $attrs.lineHeight,
                  width:item.type==2?'80%':'86%'
                }"
              >
                {{ item.title }}
              </div>
              <div
                class="leftinfoMesCss"
                :style="{
                  fontSize: $attrs.fontSize2,
                  color: $attrs.backColor2,
                  fontWeight: $attrs.bold2 ? 'bold' : 'normal',
                  fontStyle: $attrs.italic2 ? 'italic' : 'normal',
                  textDecoration: $attrs.underline2 ? 'underline' : 'none',
                  textAlign: $attrs.textAlign2,
                  lineHeight: $attrs.lineHeight2,
                }"
              >{{item.contentDisplay}}</div>
            </div>
          </div>
          <template #right>
            <van-button
              square
              text="删除"
              type="danger"
              @click="delForm()"
              class="delete-button"
            />
          </template>
        </van-swipe-cell>
      </div>
    </div>
  </div>
</template>
<script>
import {
  getMyMessage,
  delMyMessage,
  getMyMessageByDictType
} from "@/api/custom/message";
import { Dialog } from "vant";
export default {
  data() {
    return {
      mesList: [],
      pageCur: 0,
      pageSize:49,
      userAnnouncementId: "",
      imgMes: require("@/assets/images/xiaoxiinfo.png"),
      mesTypeArr:[],
      savearr:[]
    };
  },
  props:['sourceList'],
  computed: {
    mesHeight() {
      if (
        this.$store.state.mobile.isJump ||
        this.$store.state.mobile.userAgent === "mobile"
      ) {
        return "100%";
      } else {
        return (this.$attrs.moveHeight || this.$attrs.gridh || 150) + "px";
      }
    },
  },
  watch:{
    sourceList(val){
      console.log('sourceList',val);
    
      if( this.$store.state.mobile.userAgent === "pc"){
this.handlersave(val);
      }
    }
  },
  mounted() {
    setTimeout(()=>{
      this.getList();
    },600)
    this.getMessageType();
  },
  methods: {
    //获取表单数据
    getList() {
      let sourcearr = [];
      if(this.$store.state.mobile.userAgent === "mobile"){
        this.pageCur++;
        this.pageSize = 10;
        sourcearr = this.sourceList;
      }else{
        this.pageCur = 1;
      }
      let params = {
        pageNo: this.pageCur,
        pageSize:this.pageSize,
        value: "",
        statusList: '',
          types: sourcearr,
          sortord: 'DESC',
      };
      getMyMessage(params).then((res) => {
        if (res.code === 0) {
          if(this.$store.state.mobile.userAgent === "pc"){
        this.savearr.push(...res.data.list);
        this.handlersave(this.sourceList);
      }else{
        this.mesList.push(...res.data.list);
      }
         
        
          
          
        }
      });
    },
    handlersave(arr){
      if(!arr.length){
        this.mesList = this.savearr;
      }else{
        this.mesList = this.savearr.filter(item=>{
        return arr.includes(item.type);
      });
      }
      
    },
    getMessageType(){
            getMyMessageByDictType().then((res) => {
                if(res.code === 0){
                    this.mesTypeArr = res.data;
                    
                }   
            })
        },
    beforeClose({ position, instance }) {
      let _that = this;
      switch (position) {
        case "right":
          _that.delForm();
          break;
        default:
          instance.close();
      }
    },
    getCurid(val) {
      this.userAnnouncementId = val;
    },
    delForm() {
      // 删除
      Dialog.confirm({
        message: "确认删除此消息?",
      })
        .then(() => {
          delMyMessage(this.userAnnouncementId)
            .then((response) => {
              if (response.code === 0) {
                this.mesList = [];
                this.pageCur = 0;
                // this.$toast.success("删除成功");
                setTimeout(()=>{
                  this.getList();
                },600)
              } else {
                // this.$toast.fail("操作失败");
              }
            })
            .catch((e) => {
              // this.$toast.fail("操作失败");
            });
        })
        .catch((e) => {
          console.log(e);
        });
    },
    turnMessage(row) {
      if (this.$store.state.mobile.userAgent === "mobile") {
        this.$router.push({
          path: "/message/detail",
          query: {
            id: row.id,
          },
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.messageEnter {
  font-size: 14px;
}
.scrollBox {
  width: 100%;
  height: 100%;
  overflow: auto;
}
.delete-button {
  height: 100%;
}
.mesBoxInfo {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  padding: 8px 5px;
  border-bottom: 0.5px solid #ccc;
  position: relative;
}
.typeicon{
  position:absolute;
  font-size:12px;
  right:0;
  top:8px;
  line-height: 20px;
    height: 20px;
    padding-right: 5px;
    padding-left: 10px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    color:#909399;
  background:#edf2fc;
}
.typecolor0{
  color:#909399;
  background:#edf2fc;
}
.typecolor1{
  color:#1890ff;
  background:#e8f4ff;
}
.typecolor2{
  color:#67c23a;
  background:#f0f9eb;
}
.typecolor3{
  color:#f56c6c;
  background:#fef0f0;
}
.typecolor4{
  color:#e6a23c;
  background:#fdf6ec;
}
.mesboxleft {
  flex: none;
  width: 44px;
  height: 44px;
  margin-right: 13px;
}
.mesboxright {
  flex: 1;
  height: 60px;
  width: 85%;
}
.leftinfoMesCss {
  height: 50%;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
</style>
<style>
.leftinfoMesCss > p {
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  overflow: hidden !important;
}
</style>